import React, {Component} from 'react';
import {View, ScrollView, StyleSheet, Text, Dimensions} from 'react-native';
import {Flex} from '@ant-design/react-native';
import {getOrderExpressLog} from '~/api/order';
import store from '~/store';
export default class LogInformation extends Component {
    static navigationOptions = {
        title: '物流跟踪',
    };
    constructor(props) {
        super(props);
        this.state = {
            orderExpressId: this.props.navigation.getParam('orderExpressId'),
            ExpressState: this.props.navigation.getParam('ExpressState'),
            list: [],
            invoicelist: [],
        };
        getOrderExpressLog({
            order_express_id: this.state.orderExpressId,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data,
                    invoicelist: r.data.data,
                });
            }
        });
    }
    render() {
        return (
            <View style={styles.content}>
                <Flex
                    justify={'between'}
                    style={{
                        width: '95%',
                        backgroundColor: 'white',
                        padding: 10,
                        marginTop: 10,
                        borderRadius: 10,
                    }}>
                    <Flex direction={'column'}>
                        <Text>物流公司：{this.state.list.expTextName}</Text>
                        <Text>物流单号：{this.state.list.mailNo}</Text>
                    </Flex>
                    <Text>
                        {(this.state.ExpressState === 1 || this.state.ExpressState === 0) && '备货中'}
                        {this.state.ExpressState === 5 && '部分发货'}
                        {this.state.ExpressState === 2 && '已发货'}
                        {this.state.ExpressState === 3 && '已收货'}
                    </Text>
                </Flex>
                <ScrollView>
                    {this.state.invoicelist.map((item, index) => {
                        return (
                            <View style={styles.expressItem} key={index}>
                                <View style={styles.expressRightFirst}>
                                    <View style={styles.process}>
                                        <Text style={{color: index === 0 ? '#0b74c4' : '#888', fontSize: 14}}>{item.context}</Text>
                                        <Text style={{color: index === 0 ? '#0b74c4' : '#888', fontSize: 12}}>{item.time}</Text>
                                    </View>
                                </View>
                                <View style={[styles.expressLeft, {backgroundColor: index === 0 ? '#0b74c4' : '#e0e0e0'}]} />
                            </View>
                        );
                    })}
                </ScrollView>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    process: {
        paddingVertical: 10,
        flexDirection: 'column',
        borderBottomColor: '#e0e0e0',
        borderBottomWidth: 1,
        paddingRight: 20,
    },
    expressRightFirst: {
        width: Dimensions.get('window').width,
        paddingLeft: 25,
        paddingRight: 10,
        borderLeftWidth: 1,
        borderLeftColor: '#e0e0e0',
        flexDirection: 'column',
    },
    content: {
        marginLeft: 10,
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
    },
    expressItem: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        paddingLeft: 10,
        width: Dimensions.get('window').width,
    },
    expressLeft: {
        width: 10,
        height: 10,
        borderRadius: 5,
        backgroundColor: '#e0e0e0',
        position: 'relative',
        right: Dimensions.get('window').width + 4,
        top: 20,
    },
});
